<template>
    <!-- 根视图组件 -->
    <view>
        <!-- swiper 组件，用于创建轮播图 -->
        <!-- :indicator-dots="true" 显示指示点 -->
        <!-- :autoplay="true" 自动播放 -->
        <!-- :interval="3000" 自动切换时间间隔为 3000 毫秒 -->
        <!-- :duration="1000" 滑动动画时长为 1000 毫秒 -->
        <!-- circular 开启循环滑动 -->
        <!-- :style="getStyle" 动态绑定样式，高度由 getStyle 计算得出 -->
        <swiper class="swiper-banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular
            :style="getStyle">
            <!-- 使用 v-for 指令遍历 swipers 数组，渲染每个轮播项 -->
            <swiper-item v-for="(swiper,s) in swipers" :key="s">
                <!-- 每个轮播项的视图 -->
                <view class="swiper-item">
                    <!-- 图片组件，:src 绑定图片的源地址 -->
                    <!-- mode="" 图片的裁剪、缩放模式，这里为空使用默认模式 -->
                    <!-- :style="getStyle" 动态绑定样式，高度由 getStyle 计算得出 -->
                    <!-- @click="previewImage(s)" 点击图片时触发 previewImage 方法，参数为当前索引 -->
                    <image :src="swiper.src" mode="" :style="getStyle" @click="previewImage(s)"></image>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    export default {
        // 组件名称
        name: "swiper-banner",
        data() {
            return {
                // 这里没有定义数据，可根据需要添加
            };
        },
        // 组件接收的 props
        props: {
            // swipers 可以是对象或数组类型，用于存储轮播图的信息
            swipers: {
                type: [Object, Array]
            },
            // height 是字符串类型，用于指定轮播图的高度
            height: {
                type: String
            },
            // bool 是布尔类型，用于控制是否处理图片地址数组
            bool: {
                type: Boolean
            }
        },
        // 计算属性
        computed: {
            // getStyle 计算属性，根据传入的 height 属性计算样式
            getStyle() {
                if (this.height) {
                    // 如果 height 存在，返回高度样式
                    return `height:${this.height}rpx`
                }
            },
            // getUrls 计算属性，根据 bool 属性处理图片地址数组
            getUrls() {
                if (this.bool) {
                    // 如果 bool 为 true，将 swipers 数组中的每个元素的 src 属性提取出来，组成新数组
                    return this.swipers.map(item => {
                        return item.src
                    })
                }
            }
        },
        // 组件方法
        methods: {
            // previewImage 方法，用于预览图片
            previewImage(index) {
                // uni.previewImage 是 uni-app 提供的预览图片 API
                // urls 是要预览的图片地址数组，由 getUrls 计算属性提供
                // current 是当前显示的图片索引
                // loop 开启循环预览
                uni.previewImage({
                    urls: this.getUrls,
                    current: index,
                    loop: true,
                });
            }
        }
    }
</script>

<style scoped>
    /* 设置 swiper-banner 组件内的 swiper-item 中的图片样式 */
    .swiper-banner .swiper-item image {
        width: 750rpx;
        height: 350rpx;
    }

    /* 这里的样式选择器没有实际作用，可根据需要修改 */
    .swiper-item image {}
</style>